<template>
	<view class="content">
		<f-navbar title="编辑店铺类目" fontColor="#333" fontSize="34" bgColor="#fff">
			<view class="u-flex" slot="left">
				<van-icon name="arrow-left" color="#333" size="20" />
			</view>
		</f-navbar>
		<view class="content_box">
			<view class="content_top">
				<view class="content_item" v-for="(item,index) in fenleiList" :key="index">
					<view class="content_itemL">
						{{item.title}}
					</view>
					<view class="content_itemR" @click="ondelete(index)">
						<image class="jian_icon" :src="imgurl+'jian_icon.png'" mode=""></image>
						删除
					</view>
				</view>
			</view>
			<view class="add_box">
				<view class="addbtn_box" @click="onadd">
					<van-icon class="addicon" name="add-o" size="20" color="#333" />添加
				</view>
			</view>
			<van-dialog :show="isaddpopup" use-slot title="添加分类" @confirm="onconfirm" @cancel="oncancel"
				showCancelButton id="van-dialog">
				<input @input="oninput" :value="fenleivalue" class="fenlei_input" type="text" placeholder="请输入">
			</van-dialog>

			<view class="bottom_box">
				<view class="bottom_btn" @click="onsubmit">
					保存
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import fNavbar from '@/uni_modules/f-navbar/components/f-navbar/f-navbar.vue';
	import {
		getMarksList,
		saveMarks
	} from '../../../utils/storeapp.js'
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				isaddpopup: false, // 添加分类弹窗
				fenleiList: [], // 分类数组
				fenleivalue: '',
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 保存
			onsubmit(){
				saveMarks({
					marks_val: JSON.stringify(this.fenleiList)
				}).then(res => {
					console.log(res.data);
					if (res.code == 1) {
						// this.fenleiList = res.data
						this.getList()
						this.isaddpopup = false
						this.fenleivalue = ''
						// uni.showToast({
						// 	title: res.info,
						// 	icon: 'none',
						// 	duration: 2000
						// })
						// setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						// },2000)
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					}
				
				})
			},
			// 获取数据
			getList() {
				getMarksList({}).then(res => {
					console.log(res.data);
					if (res.code == 1) {
						this.fenleiList = res.data
					} else {
						uni.showToast({
							title: res.info,
							icon: 'none',
							duration: 2000
						})
					}


				})
			},
			// 删除
			ondelete(e) {
				console.log(e);
				this.fenleiList.splice(e, 1)
				console.log(this.fenleiList);
				// saveMarks({
				// 	marks_ids: e.marks_id,
				// 	title: e.title
				// }).then(res => {
				// 	console.log(res.data);
				// 	this.getList()
				// })
			},
			// 输入的内容
			oninput(e) {
				console.log(e.detail.value);
				this.fenleivalue = e.detail.value
			},
			// 添加弹窗
			onadd() {
				this.isaddpopup = true
			},
			// 添加输入框确认按钮
			onconfirm() {
				let obj = {
					title: this.fenleivalue,
					id:0
				}
				this.fenleiList.push(obj)
				this.isaddpopup = false
				this.fenleivalue = ''
				// saveMarks({
				// 	title: this.fenleivalue
				// }).then(res => {
				// 	console.log(res.data);
				// 	if (res.code == 1) {
				// 		// this.fenleiList = res.data
				// 		this.getList()
				// 		this.isaddpopup = false
				// 		this.fenleivalue = ''
				// 	} else {
				// 		uni.showToast({
				// 			title: res.info,
				// 			icon: 'none',
				// 			duration: 2000
				// 		})
				// 	}

				// })

				console.log(this.fenleiList);
			},
			// 添加输入框取消按钮
			oncancel(e) {
				console.log(e);
				this.isaddpopup = false
				this.fenleivalue = ''
			},
		},
	}
</script>

<style>
	page {
		background: #eee;
	}

	.content_top {
		width: 690rpx;
		/* height: 184rpx; */
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 6rpx;
	}

	.add_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.addbtn_box {
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		margin-right: 30rpx;
	}

	.addicon {
		margin-right: 9rpx;
	}

	.fenlei_input {
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}

	.content_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.jian_icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.content_itemL {
		font-size: 30rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
		margin-left: 20rpx;
	}

	.content_itemR {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #333333;
	}

	.bottom_box {
		width: 100%;
		height: 98rpx;
		background: #FFFEFE;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_btn {
		width: 154rpx;
		height: 60rpx;
		background: #EF0E6C;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-family: Hiragino Sans GB;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
</style>